<template>
  <div class="flexcen">
    <el-form
      @submit.native.prevent
      ref="form"
      :model="user"
      :rules="rules"
      label-width="135px"
    >
      <!-- 实现验证码输入 -->
      <el-form-item label="账号(手机号码)">
        {{ propUser.phoneNumber }}
      </el-form-item>
      <el-form-item label="新账号(手机号码)" prop="phoneNumber">
        <el-input
          auto-complete="off"
          v-input-restrict
          style="width: 400px"
          v-model="user.phoneNumber"
          placeholder="请输入新账号"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="verificationCode">
        <el-input
          auto-complete="off"
          v-input-restrict
          style="width: 400px"
          placeholder="请输入验证码"
          v-model="user.verificationCode"
        >
          <template slot="append">
            <div
              class="shou"
              style="color: #28b28b"
              @click="debouncedStartCountdown"
              v-if="!countingDown"
            >
              获取验证码
            </div>
            <div v-else>
              <div v-if="countdownSeconds > 0">
                {{ countdownSeconds }}s后重新获取
              </div>
              <div
                v-else
                style="cursor: pointer; color: #28b28b"
                @click="debouncedStartCountdown"
              >
                重新获取
              </div>
            </div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button v-preventReClick type="danger" size="mini" @click="close"
          >返回</el-button
        >
        <el-button v-preventReClick type="primary" size="mini" @click="submit"
          >确认</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
import { debounce } from "@/utils";
import {
  updateUserProfile,
  sendPhoneCode,
  changeBindPhone,
} from "@/api/system/user";
import { checkPhone } from "@/utils/validate";
export default {
  props: {
    propUser: {
      type: Object,
    },
  },
  data() {
    return {
      countingDown: false,
      countdownSeconds: 60,
      //
      user: {
        phoneNumber: undefined,
        verificationCode: undefined,
      },
      // 表单校验
      rules: {
        phoneNumber: [
          {
            required: true,
            validator: checkPhone(this.propUser.phoneNumber),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    debouncedStartCountdown: debounce(function () {
      this.startCountdown();
    }, 1000), // 设置防抖时间为 1000 毫秒
    // 设置防抖延迟时间和是否立即执行
    async startCountdown() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          await sendPhoneCode({
            phone: this.user.phoneNumber,
          });
          this.countdownSeconds = 59; // 重置倒计时时间
          this.countingDown = true;
          const timer = setInterval(() => {
            this.countdownSeconds--;
            if (this.countdownSeconds === 0) {
              clearInterval(timer);
              this.countingDown = true;
            }
          }, 1000);
        }
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.user.verificationCode == undefined) {
            this.$modal.msg("请输入验证码");
            return false;
          }
          changeBindPhone({
            phoneNumber: this.user.phoneNumber,
            phoneCode: this.user.verificationCode,
          }).then((response) => {
            this.$modal.msgSuccess("修改成功");
            setTimeout(() => {
              this.close();
            }, 500);
          });
        }
      });
    },
    close() {
      this.$emit("changeTab", "userinfo");
    },
  },
};
</script>
  